<script setup>
import { ref, computed } from 'vue';
const props = defineProps(['shopCart']);

const CartCheckList = computed(() => {
  return props.shopCart.list.filter((item) => item.checked);
});

const CartCheckCount = computed(() => {
  return CartCheckList.value.reduce((sum, item) => sum += item.number, 0);
});

</script>

<template>
  <div class="card">
    <div class="card_shop_name">{{ props.shopCart.name }}</div>
    <div class="card_list">
      <div class="card_list_item" v-for="item in CartCheckList" :key="item.title">
        <div class="card_list_item_img">
          <img :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="" />
        </div>
        <div class="card_list_item_content">
          <div class="card_list_item_content_title">{{ item.title }}</div>
          <div class="card_list_item_content_price">
            <span class="highlight">￥{{ item.price }} x {{ item.number }}</span>
            <span>￥{{ (item.price * item.number).toFixed(2) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card_total">
      共计{{ CartCheckCount }}件
      <!-- v-if="props.confirmation != 'confirmation'" -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";

.card {
  margin: 0.18rem;
  padding: 0.18rem;
  background-color: $bgColor;

  &_shop_name {
    line-height: 0.42rem;
    font-size: 0.16rem;
    margin-bottom: 0.18rem;
  }

  &_list {
    &_item {
      display: flex;
      margin-bottom: 0.18rem;

      &_img {
        width: 0.48rem;
        margin-right: 0.18rem;

        img {
          width: 0.48rem;
          height: 0.48rem;
        }
      }

      &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        &_title {
          font-size: 0.14rem;
          font-weight: bold;
          color: $content_fontcolor;
          @include ellipse;
        }

        &_price {
          display: flex;
          justify-content: space-between;

          .highlight {
            color: $hightlight-fontColor;
          }
        }
      }
    }
  }

  &_total {
    line-height: 0.26rem;
    text-align: center;
    font-size: 0.14rem;
    color: $light-fontColor;
    background-color: $search-bgColor;
  }
}
</style>